<!-- 建立通用表格 -->
<template>
   <div class='mytable'>
       <el-row type="flex" justify="space-between" :gutter="20">
           <el-col :span='6'></el-col>
           <el-col :span='12'>
               <el-button-group>
                    <el-button size='mini' icon="el-icon-edit" @click="$emit('addNewTable')">添加</el-button>
                    <el-button size='mini' icon="el-icon-delete" 
                    @click="$emit('myDelete',selection)"
                    :disabled='selection.length==0' type='danger'>删除</el-button>
               </el-button-group>
           </el-col>
           <el-col :span='6'></el-col>
       </el-row>
       <el-row type="flex" justify="space-between" :gutter="20">
           <el-col :span='6'>
               {{selection}}
           </el-col>
           <el-col :span='12'>
                <el-table  stripe :data="mydata" 
                @select-all="selection=$event"
                @select='selection=$event'>
                    <el-table-column label='编号' type='selection' align='center' width='50'></el-table-column>
                    
                    <template v-for="item,index in myColsShow">
                        <el-table-column v-if="item.prop && item.type=='file'" :label='item.label' :prop='item.prop' :align='item.align' :width='item.width'> 
                            <template slot-scope="slot">
                                <el-image :src='(slot.row.src)|httpchange'></el-image>
                            </template>
                        </el-table-column>
                        <!-- 非自定义内容且不是下拉框 -->
                        <el-table-column v-else-if="item.prop && item.type!=='select'" :label='item.label' :prop='item.prop' :align='item.align' :width='item.width'></el-table-column>
                        <!-- 非自定义内容但是是下拉框 -->
                        <el-table-column v-else-if="item.prop && item.type=='select'" :label='item.label' :prop='item.prop' :align='item.align' :width='item.width'>
                            <template slot-scope="scope">
                                <!-- 将性别男女进行转换 -->
                                {{scope.row.sex|transformSex}}
                            </template>
                        </el-table-column>
                       
                        <!-- 自定义内容 -->
                        <el-table-column v-else :label='item.label'  :align='item.align' :width='item.width'>
                            <template slot-scope="scope">
                                <slot :name="item.slot" :myDateData="scope.row"></slot>
                            </template>
                        </el-table-column>
                    </template>
                    <el-table-column label='操作' align='center'>
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-button type="primary" size="mini" @click="$emit('myEmit',scope.row)">编辑</el-button>
                                <el-button type="danger" size="mini" @click="$emit('myDelete',[scope.row])">删除</el-button>
                            </el-button-group> 
                        </template>
                    </el-table-column>
                </el-table>
           </el-col>
           <el-col :span='6'></el-col>
       </el-row> 
       <!-- 页码 -->
       <el-row type="flex" justify="space-between" :gutter="20">
           <el-col :span='6'></el-col>
           <el-col :span='12'>
               <!-- 显示页码条数 -->
               {{page}}
               <el-pagination :current-page.sync='curPage' :total='total' 
               :size='size'>
               </el-pagination>
           </el-col>
           <el-col :span='6'></el-col>
       </el-row>
   </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  props:['mydata','myCols','total','size','page'],
  components: {},
  data() {
    //这里存放数据
    return {
       //存储选中的数据
       selection:[],
    };
  },
  //监听属性 类似于data概念
  computed: {
      curPage:{
          get(){
              return this.page;
          },
          set(val){
              //接收传递的当前页，通知父级进行更改
              this.$emit('update:page',val);
          }
      },
      //对数据展示的列进行一个过滤，有些敏感列不展示
      myColsShow(){
          //只展示isshow为true的，必须用强等于。因为没写这个isshow的属性的算是true，
          return this.myCols.filter(item=>item.IsShow!==false)
      }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
  
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
      console.log(this.myColsShow);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
  
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style lang='css' scoped>

</style>